<template>
  <el-row :gutter="4">
    <el-col :span="6">
      <el-select v-model="year" placeholder="请选择年份">
        <el-option
          v-for="item in yearOptions"
          :key="item.value"
          :label="item.label"
          :value="item.value"
        >
        </el-option>
      </el-select>
    </el-col>
    <el-col :span="6">
      <el-select v-model="subject" placeholder="请选择科目">
        <el-option
          v-for="item in subjectOptions"
          :key="item.value"
          :label="item.label"
          :value="item.value"
        >
        </el-option>
      </el-select>
    </el-col>
  </el-row>
  <el-row :gutter="4">
    <el-col :span="24">
      <el-card>
        <div id="firstchart" style="width: 1800px; height: 400px"></div>
      </el-card>
    </el-col>
  </el-row>
  <el-row>
    <el-col :span="12">
      <el-card>
        <div id="sexratio" style="width: 600px; height: 400px"></div>
      </el-card>
    </el-col>
    <el-col :span="12">
      <el-card>
        <div id="thirdchart" style="width: 600px; height: 400px"></div>
      </el-card>
    </el-col>
  </el-row>
</template>

<script>
// @ is an alias to /src
import * as echarts from "../js/Echarts";
export default {
  data() {
    return {
      year: "2024",
      subject: "",
      yearOptions: [
        {
          label: "2024",
          value: "2024",
        },
        {
          label: "2025",
          value: "2025",
        },
      ],
      subjectOptions: [
        {
          label: "数学",
          value: "数学",
        },
        {
          label: "英语",
          value: "英语",
        },
      ],

      weeks: [],
      values: [],
    };
  },
  watch: {
    year: {
      handler(newValue) {
        this.fetchData();
      },
      immediate: true,
    },
    subject: {
      handler(newValue) {
        this.fetchData();
      },
      immediate: true,
    },
  },
  methods: {
    fetchData() {
      this.axios
        .get("/getupStudents", {
          params: {
            year: this.year,
            subject: this.subject,
          },
        })
        .then((res) => {
          console.log(res.data);
          this.weeks = []
          this.values = []
          for (var i = 0; i < res.data.length; i++) {
            this.weeks.push(res.data[i].week);
            this.values.push(res.data[i].value);
          }
          console.log(this.weeks);
          console.log("values");
          console.log(this.values);
          var echart = echarts.init(document.getElementById("firstchart"));
          var option = {
            title: {
              text: "学生成绩",
              left: "center",
            },
            tooltip: {
              trigger: "axis",
              axisPointer: {
                type: "shadow",
              },
            },
            grid: {
              top: "20%",
              left: "3%",
              right: "4%",
              bottom: "3%",
              containLabel: true,
            },
            xAxis: [
              {
                type: "category",
                data: this.weeks,
                axisTick: {
                  alignWithLabel: true,
                },
              },
            ],
            yAxis: [
              {
                type: "value",
              },
            ],
            series: [
              {
                name: "人数",
                type: "bar",
                barWidth: "60%",
                data: this.values,
              },
            ],
          };

          echart.setOption(option);
        })
        .catch((error) => {
          console.error(error);
        });
    },
  },
  mounted() {
    this.fetchData();

    this.axios
      .get("/getupTeachers")
      .then((res) => {
        console.log(res.data);
        var echart = echarts.init(document.getElementById("sexratio"));
        var option = {
          title: {
            text: "教师职称比例",
            // subtext: 'Fake Data',
            left: "center",
          },
          tooltip: {
            trigger: "item",
          },
          legend: {
            orient: "vertical",
            left: "left",
          },
          series: [
            {
              name: "Access From",
              type: "pie",
              radius: "50%",
              data: res.data,
              emphasis: {
                itemStyle: {
                  shadowBlur: 10,
                  shadowOffsetX: 0,
                  shadowColor: "rgba(0, 0, 0, 0.5)",
                },
              },
            },
          ],
        };
        echart.setOption(option);
      })
      .catch();

    this.axios
      .get("/getddStudents")
      .then((res) => {
        console.log(res.data);
        var echart = echarts.init(document.getElementById("thirdchart"));
        var option = {
          title: {
            text: "未及格学生",
            // subtext: 'Fake Data',
            left: "center",
          },
          tooltip: {
            trigger: "item",
          },
          legend: {
            top: "5%",
            left: "center",
          },
          series: [
            {
              name: "",
              type: "pie",
              radius: ["40%", "70%"],
              avoidLabelOverlap: false,
              itemStyle: {
                borderRadius: 10,
                borderColor: "#fff",
                borderWidth: 2,
              },
              label: {
                show: false,
                position: "center",
              },
              emphasis: {
                label: {
                  show: true,
                  fontSize: 40,
                  fontWeight: "bold",
                },
              },
              labelLine: {
                show: false,
              },
              data: res.data,
            },
          ],
        };
        echart.setOption(option);
      })
      .catch();
  },
};
</script>
